<template>
    <div style="width: 100%; height: 500px" ref="chartRef" />
</template>

<script lang="ts">
import { useEcharts } from '@/hooks/common/useEcharts';
import api from '@/api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
    props: {
        options: {
            type: Array,
            default: () => []
        }
    },
    setup() {
        const chartRef = ref<any>();
        const option = ref<any>({
            title: {
                text: '需求总数',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'vertical',
                left: 'center',
                bottom: 'bottom'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: [],
                nameLocation: 'end',
                axisLabel: {
                    //坐标轴刻度标签的相关设置。
                    interval: 0,
                    rotate: '45',
                    formatter: (val) => {
                        return val.length > 10 ? val.slice(0, 8) + '...' : val;
                    }
                }
            },
            series: [
                {
                    name: '需求受理',
                    type: 'bar',
                    data: []
                },
                {
                    name: '功能点',
                    type: 'bar',
                    data: []
                },
                {
                    name: '版本迭代',
                    type: 'bar',
                    data: []
                }
            ]
        });
        const { setOptions } = useEcharts(chartRef, option.value);
        const getOptions = async () => {
            const { success, moule } = await api.workbenchModel.statisticsSystemRequire();
            if (success) {
                const systemArr: string[] = [];
                const businessCountArr: number[] = [];
                const productCountArr: number[] = [];
                const versionCountArr: number[] = [];
                moule.forEach((item) => {
                    const { name, businessCount, productCount, versionCount } = item;
                    systemArr.push(name);
                    businessCountArr.push(businessCount);
                    productCountArr.push(productCount);
                    versionCountArr.push(versionCount);
                    option.value.series[0].data = businessCountArr;
                    option.value.series[1].data = productCountArr;
                    option.value.series[2].data = versionCountArr;
                    option.value.yAxis.data = systemArr;
                });
                setOptions(option.value);
            }
        };
        getOptions();
        return {
            chartRef
        };
    }
});
</script>

<style scoped lang="less">
</style>